<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  #box{width: 600px;height: 400px;margin: 100px auto;background: #fff;border: 5px solid #C0C0C0;overflow: hidden;position: relative;}
  img{width: 600px;height: 400px;position: absolute;}
  p{width: 600px;height: 100px;position: absolute;top: 400px;background: rgba(237,237,237,0.5);text-align: center;}
  </style>
  <script type="text/javascript">
    function getstyle(obj,attr){
      return obj.currentstyle ? obj.currentstyle[attr] : getComputedStyle(obj)[attr];
    }
    function move(obj,attr,dir,target,fn){
      parseFloat(getstyle(obj,attr)) < target ? dir : -dir;
      clearInterval(obj.timer);
      obj.timer = setInterval(function(){
        var speed = parseFloat(getstyle(obj,attr)) + dir;
        if(speed >= target && dir > 0 || speed < target && dir < 0){
          speed = target;
        }
        obj.style[attr] = speed + 'px';
        if(speed == target){
          clearInterval(obj.timer);
          fn && fn();
        }
      },50)
    }
    window.onload = function(){
      var Box = document.getElementById('box');
      var Div = Box.getElementsByTagName('div')[0];
      var Img = Box.getElementsByTagName('img');
      var P = Box.getElementsByTagName('p');
      var wid = parseInt(getstyle(Img[0],'width'));
      var num = 0;
      var num1 = 0;
      var arr = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"];
      for (var i = 0; i < Img.length; i++) {
        Img[i].src = arr[i];
        Img[i].style.left = '' +  600 * i + 'px';
      };
      function inital(){
        Img[0].src = arr[num];
        Img[1].src = arr[num1];
        Img[0].style.left = '0px';
        Img[1].style.left = '600px'
        move(Img[0],'left',-30,-600,function(){
          move(P[num],'top',-30,300,function(){
            setTimeout(function(){move(P[num],'top',30,400)},2000)
          })
        });
        move(Img[1],'left',-30,0);
        num = num1;
      }
      setInterval(function(){
        num1++;
        if(num1 >= arr.length){num1 = 0;}
        inital();
      },4000)
      
    }
  </script>
</head>
<body>
  <div id="box">
    <img src="">
    <img src="">
    <p>图片一</p>
    <p>图片二</p>
    <p>图片三</p>
    <p>图片四</p>
    <p>图片五</p>
    <p>图片六</p>
  </div>
</body>
</html>